import { defineComponent, inject, reactive, watch } from "vue";
import { cloneDeep } from 'loadsh'

export default defineComponent({
    props: {
        block: {
            type: Object
        },
        data: {
            type: Object
        },
        updateContainer: {
            type: Function
        },
        updateBlock: {
            type: Function
        }
    },
    setup(props, ctx){

        const config = inject('config')

        const state = reactive({
            editorData: {}
        })

        // 重置按钮
        const reset = () => {
            if(!props.block){
                state.editorData = cloneDeep(props.data.container)
            } else {
                state.editorData = cloneDeep(props.block)
            }
        }

        // 应用按钮
        const apply = () => {
            if(!props.block){
                props.updateContainer({ ...props.data, container: state.editorData })
            } else {
                props.updateBlock(state.editorData, props.block)
            }
        }

        watch(() => props.block, reset, {immediate: true, deep: true})

        return () => {
            let content = []
            if(!props.block){
                content.push(<>
                <el-form-item label='容器宽度'>
                    <el-input-number v-model={state.editorData.width} />
                </el-form-item>
                <el-form-item label='容器高度'>
                    <el-input-number  v-model={state.editorData.height}/>
                </el-form-item>
                </>)
            } else {
                const configComponet = config.componentMap[props.block.key]
                if(configComponet && configComponet.props){
                    content.push(
                        Object.entries(configComponet.props).map(([propName, propConfig]) => {
                            return <el-form-item label={propConfig.label}>
                                {
                                    {
                                        'input': (propName) => <el-input v-model={state.editorData.props[propName]}></el-input>,
                                        'color': (propName) => <el-color-picker show-alpha  v-model={state.editorData.props[propName]}/>,
                                        'select': (propName) => <el-select v-model={state.editorData.props[propName]}>
                                            {
                                                propConfig.options.map(item => {
                                                    return <el-option key={item.value} label={item.item} value={item.value}></el-option>
                                                })
                                            }
                                        </el-select>
                                    }[propConfig.type](propName)
                                }
                            </el-form-item>
                        })
                    )
                }
            }

            return <el-form label-position="top">
                {content}
                <el-form-item>
                    <el-button type="primary" onClick={() => apply()}>应用</el-button>
                    <el-button type="default" onClick={reset}>重置</el-button>
                </el-form-item>
            </el-form>
        }
    }

})